<template>
  <Card>
    <Cond @query="load" :model="pageIn" :disabled="!org.id">
      <CondItem title="关键字" field="q">
        <Input v-model="pageIn.q" />
      </CondItem>
      <CondItem title="类型" field="cond.type" immediate>
        <ees-enum :value="pageIn.cond.type" clazz="OrgType" />
      </CondItem>
      <template #op>
        <Button type="primary" v-dialog="[Create, '创建#1', { pid: pageIn.cond.pid }, load]" :disabled="!org.id">
          <IconPlus />
        </Button>
      </template>
    </Cond>
    <Table :data="pageOut.records" @sorter-change="(f, m) => onSort(f, m, load)" :loading="loading">
      <template #columns>
        <TableColumn title="名称">
          <template #cell="{ record }">
            <Popover position="right">
              <Button v-text="record.name" />
              <template #content>
                <Space>
                  <Button v-dialog="[Update, '编辑#1', record, load]" v-text="'编辑'" />
                </Space>
              </template>
            </Popover>
          </template>
        </TableColumn>
        <TableColumn title="类型">
          <template #cell="{ record }">
            <ees-format :value="record.type" pattern="enum" params="OrgType" />
          </template>
        </TableColumn>
        <TableColumn title="全名" field="fullName" />
        <TableColumn title="创建日期" :width="120">
          <template #cell="{ record }">
            <ees-format :value="record.createdAt" pattern="date" />
          </template>
        </TableColumn>
        <TableColumn title="更新日期" :width="120">
          <template #cell="{ record }">
            <ees-format :value="record.updatedAt" pattern="date" />
          </template>
        </TableColumn>
        <TableColumn title="末级？" :width="110" align="center">
          <template #cell="{ record }">
            <ees-format :value="record.isLeaf" pattern="boolean" />
          </template>
        </TableColumn>
        <TableColumn title="层级" :width="80" field="level" />
      </template>
    </Table>
    <ees-page v-model:pageIn="pageIn" :pageOut="pageOut" @change="load" />
  </Card>
</template>

<script setup>
import { useDelete, useLoading, usePage, useTableSelect, useConfirm } from '@idmy/core'
import { computed, defineAsyncComponent, inject, watch } from 'vue'
import { pageOrg } from './services'

const Create = defineAsyncComponent(() => import('./create.vue'))
const Update = Create

const { tableRowSelect, tableServerMap, tableSelectDisabled, onTableSelectClear, onTableSelectChange, tableSelectedMap } = useTableSelect()

const props = defineProps({
  parentData: {
    type: Object,
    required: true,
    default: () => {
      return {
        pid: null,
      }
    },
  },
})

const { pageIn, pageOut, onSort } = usePage({
  sorts: ['createdAt', 'desc'],
  condition: {},
})

const org = computed(() => props.parentData)
const [load, loading] = useLoading(async () => {
  if (!!org.value.id) {
    pageIn.cond.pid = org.value.id
    pageOut.value = await pageOrg(pageIn)
    pageOut.value.records.forEach(item => tableServerMap.set(item.id, item))
  } else {
    pageOut.value = { total: 0, records: [] }
    onTableSelectClear()
  }
})

watch(
  org,
  () => {
    load()
    onTableSelectClear()
  },
  { immediate: true }
)
</script>
